<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动回顶+悬浮</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4682916_0f2f51l5wwvh.css">
    <style>
        .boxTop {
            width: 40px;
            height: 50px;
            border-radius: 20%;
            background-color: skyblue;
            position: fixed;
            right: 10px;
            bottom: 30px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hide {
            display: none;
        }

        .icon-huidaodingbutubiao {
            font-size: 30px;
            color: white;
        }
    </style>
</head>

<body>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>孙悟空</h1>
    <h1>八戒</h1>
    <h1>八戒</h1>
    <div id="boxTop" class="boxTop hide">
        <span id="sapn" class="iconfont icon-huidaodingbutubiao"></span>
    </div>
    <script>
        let boxTopEle = document.getElementById('boxTop');
        let spanEle = document.getElementById('span');
        let iconEle = document.querySelector('.boxTop .icon-huidaodingbutubiao');

        //给文档绑定滚动事件
        document.addEventListener('scroll', function () {
            // 获取网页卷上去的高度
            let scrollTop =
                document.documentElement.scrollTop || document.body.scrollTop;
            // 判断卷上去的高度大于500则显示回到顶部
            if (scrollTop > 500) {
                boxTopEle.classList.remove('hide');    //显示

            } else {
                boxTopEle.classList.add('hide');    //隐藏
            }
        });

        // 鼠标悬浮
        iconEle.addEventListener('mouseover', function () {
            this.style.color = 'orange';
        });
        // 鼠标离开
        iconEle.addEventListener('mouseout', function () {
            this.style.color = '';
        });

        // 回到顶部操作
        boxTopEle.addEventListener("click", function () {
            document.documentElement.scrollTop = document.body.scrollTop = 0;
            console.log('滚回到顶吧!!!')
        });

    </script>
</body>

</html>